<template>
  <div class="ones">
    <div class="one">
      <h3>欢迎光临vue开发的收银系统水果店</h3>
      <div class="two">
        <p>苹果10￥/斤，折扣《8折》</p>
        <p>请输入您要购买的斤数<input type="text" v-model.number="sum" /></p>
        <p><button @click="fn">结账买单</button></p>
        <p>
          结账单：总价： {{ zong }} ￥元折后价：{{ hes }}元省了：{{ sheng }}￥元
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sum: "",
      zong: "",
      hes: "",
      sheng: "",
    };
  },
  methods: {
    fn() {
      const he = this.sum * 10;
      this.zong = he;
      this.hes = he * 0.8;
      this.sheng = he - he * 0.8;
    },
  },
};
</script>

<style>
.ones {
  text-align: center;
}
.one {
  padding-bottom: 20px;
  width: 1000px;
  /* height: 200px; */
  text-align: center;
  border: 1px solid red;
}
.two {
  width: 800px;
  /* height: 130px; */
  margin-left: 100px;
  border: 1px solid pink;
}
p {
  border: 1px solid #000;
}
</style>